<template>
	<view class="contailer padding">
		<view class="header flex flex-direction align-center justify-center" >
			<image src="../../static/school_logo.png" mode=""></image>
			<view class="class-name text-white text-center text-lg margin-top-sm">{{class_info.info.class_name}}</view>
		</view>
		<view class="con">
			<view class="teacher">
				<view class="title flex align-center">
					<view class="icon"></view>
					<view class="margin-left-sm">老师 ({{arr.length}}) 人</view>
					<!-- <view class="invite text-sm" @tap="inviteTeacher">邀请老师</view> -->
					<button class="invite text-sm" data-type="teacher" open-type="share">邀请老师</button>
				</view>
				<view class="tank flex align-center flex-wrap justify-start margin-top">
					<view class="item flex flex-direction align-center justify-between">
						<view class='cu-avatar round' :style="[{ backgroundImage:'url(' + teacher.user.avatar + ')' }]"
							style="width: 102rpx;height: 102rpx;">
							<view class='cu-tag badge text-white bg-blue'>班主任</view>
						</view>
						<text class="text-sm">{{teacher.teacher_name}}</text>
					</view>
					<view class="item flex flex-direction align-center justify-between" v-for="(item,index) in arr"
						:key="index">
						<view class='cu-avatar round' :style="[{ backgroundImage:'url(' + item.user.avatar + ')' }]"
							style="width: 102rpx;height: 102rpx;">
						</view>
						<text class="text-sm">{{item.course_teacher_name}}</text>
					</view>
				</view>
			</view>
			<view class="student">
				<view class="title flex align-center">
					<view class="icon"></view>
					<view class="margin-left-sm">学生（{{brr.length}}）人</view>
				</view>
				<view class="tank flex align-center flex-wrap justify-start margin-top-sm">
					<view class="item flex flex-direction align-center justify-between margin-top-sm"
						v-for="(item,index) in brr" :key="index">
						<image class="avater round" :src="item.user.avatar" mode=""></image>
						<text class="text-sm">{{item.student_name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="btn text-white text-center" data-target="Modal" @tap="inviteStudent">邀请学生加入班级</view> -->
		<button class="btn text-white text-center" data-type="student" open-type="share">邀请学生加入班级</button>
	</view>
</template>

<script>
	import u from '@/utils/common.js'
	export default {
		data() {
			return {
				bgImage: "../../static/class_bg.jpg",
				class_id: '',
				arr: [],
				brr: [],
				teacher:{},
				class_info: '',
				type: ''
			}
		},
		onLoad(p) {

			this.class_id = p.class_id || getApp().globalData.class_id
			this.getClassDetail()
		},
		onShareAppMessage(e) {
			if(e.target.dataset.type=='teacher'){
				console.log(1,'/pages/student/inviteteacher?class_id='+this.class_id);
				return {
					title: '邀请你加入班级',
					path: '/pages/student/inviteteacher?class_id='+this.class_id,
				}
			}else{
				console.log(2,'/pages/student/invitestudent?class_id='+this.class_id);
				return {
					title: '邀请你加入班级',
					path: '/pages/student/invitestudent?class_id='+this.class_id,
				}
			}
		},
		methods: {
			// shareCurse() {
			// 	wx.showShareMenu({
			// 		// withShareTicket: true,
			// 		menus: ['shareAppMessage'],
			// 		// success: () => {
			// 		// 	console.log('分享接口调用成功');
			// 		// },
			// 		// fail: err => {
			// 		// 	console.log('分享接口调用失败', err);
			// 		// }
			// 	});
			// },
			getClassDetail() {
				u.request({
					url: 'users/class/info',
					method: 'GET',
					data: {
						class_id: this.class_id,
					},
					success: res => {
						this.class_info = res.result
						this.arr = res.result.course_teacher.list
						this.brr = res.result.student.list
						this.teacher = res.result.teacher
					}
				})
			},
			inviteStudent() {
				uni.navigateTo({
					url: './invitestudent',
					fail: () => {}
				});
			},
			inviteTeacher() {
				uni.navigateTo({
					url: './inviteteacher',
					fail: () => {}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		width: 100%;
		height: 280rpx;
		background: url(../../static/class_img_1.jpg);
		background-size: cover;
		border-radius: 20rpx;

		image {
			width: 132rpx;
			height: 132rpx;
		}
	}

	.con {
		margin-top: 90rpx;

		.student {
			margin-top: 90rpx;
		}

		.title {
			.icon {
				width: 7rpx;
				height: 34rpx;
				border-radius: 4rpx;
				background: #43c0ff;
				line-height: 34rpx;
			}
		}

		.avater {
			width: 102rpx;
			height: 102rpx;
		}

		.item {
			width: 135rpx;
			height: 150rpx;
		}
	}

	.btn {
		width: 80vw;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		background-color: #2982ff;
		margin-top: 150rpx;
		margin-left: 5vw;
		color: white;
	}

	.invite {
		margin-left: 20rpx;
		border: 1rpx solid #2982ff;
		border-radius: 15rpx;
		width: 180rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		color: #2982ff;
	}
</style>
